<template lang="html">
	<section v-if="isShow" :class="$style.book" ref="bookdetial">
		<Bheader :cname="$style.header"></Bheader>
		<DetialInfo :bookinfo="bookInfo" @readBook="readBook"/>
		<!-- 此处展示此书相关推荐的图书列表 -->
		<Recommend :tipBooks="recommendBooks" @switchItem="testSwitch"/>
		<Footer/>
	</section>
</template>
<script>
	import Bheader from '../public/header';
	import DetialInfo from './detialInfo';
	import Recommend from './recommend';
	import Footer from '../public/footer';
	export default {
		name: "book",
		components: {
			Bheader,
			DetialInfo,
			Recommend,
			Footer
		},
		data() {
			return {
				isOpenLoadConrecommend: false,
				bookId: '',
				isShow: false,
				bookInfo: {},
				recommendBooks: [],
				chaptersData: [],
			}
		},
		activated() {
			if (!this.$route.query.bookId) {
				this.reInit();
			}else {
				this.init();
			}
		},
		methods: {
			reInit() {
				this.isShow = false;
				document.body.scrollTop = 0;
				try	{
					this.bookInfo = this.CacheHelper.getItem('currentBook');
					this.bookId = this.bookInfo._id;
					new Promise((resolve,reject)=>{
						//重新取加载
						this.isOpenLoadConrecommend = false;
						this.loadRecommendData(this.bookId);
					});
					setTimeout(()=>{
						this.isShow = true;
					},2000);
				}catch(error) {
					this.$router.back();
					console.log('error: '+error);
				}
			},
			init() {
				this.isShow = false;
				this.bookId = this.$route.query.bookId;
				//获取小说信息
				new Promise((resolve,reject)=>{
					let url = 'http://novel.juhe.im/book-info/'+this.bookId;
					this.$axios.get(url).then(response=>{
						this.bookInfo = response.data;
						this.bookInfo.cover = this.CommonHelper.addressSplicing(this.bookInfo.cover,'http://statics.zhuishushenqi.com');
						this.bookInfo.cover = this.CommonHelper.transcodeCover(this.bookInfo.cover);
						this.bookInfo.rating.score = Math.floor(this.bookInfo.rating.score* 10) / 10;
						//缓存
						this.CacheHelper.setItem('currentBook',this.bookInfo);
					}).catch(error=>{
						console.log(error);
					});
					//获取书源id
					this.getOtherbookSource(this.bookId);
				});
				new Promise((resolve,reject)=>{
					//重新取加载
					this.isOpenLoadConrecommend = false;
					this.loadRecommendData(this.bookId);
				});
				setTimeout(()=>{
					this.isShow = true;
				},2000);
			},
			//切换到其他小说信息
			testSwitch(bookId) {
				console.log(bookId);
				this.$route.query.bookId = bookId;
				document.body.scrollTop = 0;
				this.init();
			},
			//加载相关推荐的书籍列表
			loadRecommendData(bookId) {
				this.recommendBooks = [];
				/*尝试拉取某id的相关推荐书籍*/
				this.$axios.get(`http://novel.juhe.im/recommend/${bookId}`)
				.then((response)=>{
					response.data.books.map(value=>{
						value.cover = this.CommonHelper.addressSplicing(value.cover,'http://statics.zhuishushenqi.com');
						value.cover = this.CommonHelper.transcodeCover(value.cover);
						this.recommendBooks.push(value);
					});
				}).catch((error)=>{
					console.log(error);
				});
			},
			//加载小说章节 链接信息
			loadChaptersData(bookSourceId) {
				this.chaptersData = [];
				const url = `http://novel.juhe.im/book-chapters/${bookSourceId}`;
				/*尝试拉取某id的相关推荐书籍*/
				this.$axios.get(url)
				.then((response)=>{
					this.chaptersData = response.data.chapters;
					//缓存
					this.CacheHelper.setItem('currentBookChapters',this.chaptersData);
				}).catch((error)=>{
					console.log(error);
				});
			},
			//获取bookId的书源
			getOtherbookSource(bookId) {
				this.$axios.get(`http://novel.juhe.im/book-sources?view=summary&book=${bookId}`)
				.then((response)=> {
					this.loadChaptersData(response.data[0]._id);
				})
				.catch((error)=> {
					console.log(error);
				});
			},
			//我要看小说了
			readBook() {
				console.log('我要看小说了');
				this.$router.push({name:'read',query:{bookId:this.bookId}});
			}
		},
		deactivated() {
			window.removeEventListener('scroll', this.handleScroll);
		}
	}
</script>
<style lang="scss" module>
	.book {
		width: 100%;
		position: relative;
		.header {
			position: fixed;
			top: 0;
			z-index: 1000;
			text-align: left;
			background-color: rgba(255,255,255,0.6);
			span {
				text-align: left;
				margin-left: 64px;
			}
		}
	}
</style>